<template>
    <div class="login-container">
        <div class="login-container-top">
            <div class="login-container-top-center">
                <div class="login-container-top-center-top">
                    <div class="login-container-top-center-top-tip">
                        <div class="login-container-top-center-top-tip-one"></div>
                        <div class="login-container-top-center-top-tip-two"></div>
                    </div>
                    <div class="login-container-top-center-top-text">
                        空天地一体化农业遥感监测平台
                    </div>
                </div>
                <div class="login-container-top-center-bottom">
                    <div class="login-container-top-center-bottom-left">
                        <div class="login-container-top-center-bottom-left-tip">Welcome欢迎登录</div>
                        <div class="login-container-top-center-bottom-left-user">
                            <img src="@/images/login/user.png" alt="">
                            <input type="text" v-model="state.user" placeholder="请输入用户名">
                        </div>
                        <div class="login-container-top-center-bottom-left-password">
                            <img src="@/images/login/password.png" alt="">
                            <input type="password" v-model="state.password" placeholder="请输入密码">
                        </div>
                        <div class="login-container-top-center-bottom-left-btn">
                            <button @click="login">登录</button>
                        </div>
                    </div>
                    <div class="login-container-top-center-bottom-right">
                        <img src="@/images/login/ranpo.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="login-container-bottom">
            <div class="login-container-bottom-item" v-for="(v, k) in state.list" :key="k">
                <a href="">{{ v.title }}</a>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter()
const login = ()=>{
    if(state.user  == 'admin'&& state.password == '123456'){
        router.push('/index')
    }
}
const state = reactive({
    user:'',
    password:'',
    list: [
        {
            title: '关于我们',
            url: ''
        },
        {
            title: '使用帮助',
            url: ''
        },
        {
            title: '质量认证',
            url: ''
        },
        {
            title: '法律声明',
            url: ''
        },

    ]
})
</script>
<style lang="less" scoped>
.login-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;

    &-top {
        flex: 1;
        background: url(@/images/login/bg.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        &-center {
            background: #fff;
            width: 1200px;
            height: 500px;
            border-radius: 8px;
            padding: 60px 60px 60px 101px;

            &-top {
                margin-bottom: 28px;
                position: relative;
                height: 44px;

                &-tip {
                    &-one {
                        position: absolute;
                        left: -30px;
                        height: 100%;
                        width: 8px;
                        top: 0;
                        background: #0656CD;
                    }

                    &-two {
                        position: absolute;
                        left: -18px;
                        height: 100%;
                        width: 2px;
                        top: 0;
                        background: #0656CD;
                    }
                }

                &-text {
                    vertical-align: bottom;
                    font-size: 43px;
                    line-height: 44px;
                    font-family: Adobe Heiti Std;
                    font-weight: normal;
                    color: #0656CD;
                }
            }

            &-bottom {
                display: flex;
                justify-content: space-between;

                &-left {
                    &-tip {
                        margin: 26px 0;
                        font-size: 16px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #CCCCCC;
                        line-height: 38px;
                        width:300px;
                    }

                    &-user , &-password{
                        padding: 20px 0;
                        display: flex;
                        align-items: center;

                        img {
                            width: 20px;
                            height: 20px;
                            margin-right: 20px;
                        }
                        input{
                            background: transparent;
                            outline:none;
                            border: none;
                            width:100%;
                            font-size: 14px;
                            &::-webkit-input-placeholder{
                                color: #ede6e6;
                            }
                        }
                        border-bottom: 1px solid #ccc;
                    }
                    &-password{
                        img{
                            width: 30px;
                            height: 30px;
                            position: relative;
                            left: -5px;
                            margin-right: 10px;
                        }
                    }
               

                    &-btn {
                        text-align: center;
                        margin: 20px 0;
                        button {
                            width: 212px;
                            height: 48px;
                            background: #0656CD;
                            border-radius: 23px;
                            font-size: 20px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #FFFFFF;
                            line-height: 24px;
                            &:hover{
                                background: #0656CDaa;
                            }
                        }
                    }
                }

                &-right {
                    img {
                        width: 458px;
                        height: 234px;
                    }
                }
            }
        }
    }

    &-bottom {
        height: 44px;
        background: #0045AB;
        display: flex;
        justify-content: center;
        align-items: center;

        &-item {
            margin: 0 4px;

            a {
                color: #fff;
                font-size: 12px;
            }

        }
    }
}
</style>